html {
    position: relative;
    min-height: 100%;
	
  }

body {
    /*box-sizing: border-box;*/
    height: 100%;
    width: 100%;
    border: 25px;
    padding: 30px;
    /* padding % is a percentage of the element's width */
    /* Borders can't be set to percentages */
    
}

#results {
    display: inline-block;
}


/*.col py-3 px-lg-5 border transparent {
  background-color: trasparent;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:  flex;
  flex-wrap: wrap;
}*/


/*.row {
   margin-top: -0.50rem !important;
  background-color: trasparent;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:  flex;
  flex-wrap: wrap;
  font-family: 'Roboto', sans-serif;
}*/

.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

.col-md-3 {
  display: flex;
  column-gap: normal;
}
.col-md-6 {
  display: flex;
  column-gap: normal;
}

li {
	/*text-align: center;*/
}
img {
  width: 75%;
  position:center;
}

/*img-responsive {
  grid-gap: 20px 50px;
}*/

/*header video background */
 deskContent {
	display: none;
	position: relative;
	background-color: black;
	height: 75vh;
	min-height: 25rem;
	width: 100%;
	overflow: hidden;
}


video {
    width: 100%; 
    height: 100%; 
    overflow: hidden;
}

/*header {
  position: relative;
  z-index: 2;
}*/




/*---------Mobile/Destop Media Queries*------------*/

@media all and (min-width: 480px) {
  .deskContent {display:block;}
  .phoneContent {display:none;}
}
@media all and (max-width: 479px) {
  .deskContent {display:none;}
  .phoneContent {display:block;}
}



@media (min-width:320px) {
    /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
}

/*@media (min-width:480px) {
    /* smartphones, Android phones, landscape iPhone 
}*/

@media (min-width:600px) {
    /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
}

@media (min-width:801px) {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
}

@media (min-width:1025px) {
    /* big landscape tablets, laptops, and desktops */
	
}

@media (min-width:1281px) {
    /* hi-res laptops and desktops */
}


/*Media Queries that are smaller than 960px:*/

@media (min-width:320px) {
    /* smartphones, iPhone, portrait 480x320 phones */
}

@media (min-width:481px) {
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
}

@media (min-width:641px) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
}

@media (min-width:961px) {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
}

@media (min-width:1025px) {
    /* big landscape tablets, laptops, and desktops */
}

@media (min-width:1281px) {
    /* hi-res laptops and desktops */
}